<template>
	<view :class="isInputFocus? 'ss-border-bottom-focus ss-container':'ss-border-bottom ss-container'">
		<input class="ss-common-input" style="padding-top: 0upx;" :type="type" :maxlength="maxlength" :placeholder="placeholder"
		 placeholder-class="common-input-placehold" @focus="onPhoneInputFocus" @blur="onPhoneInputBlur" @input="onInputChanged"
		 :password="password" v-model="inputStr" adjust-position="true" cursor-spacing="20"></input>

		<!-- 		<view v-show="ishowpwd" :class="password ?'icon iconfont iconinput_closed': 'icon iconfont iconinput_open'" style="font-size: 32upx;"
		 @tap="onPwdShowChange"></view> -->
	</view>
</template>

<script>
	export default {
		name: 'UniGrid',
		props: {
			give: {
				type: String
			},
			// 输入类型
			type: {
				type: String,
				default: 'text'
			},
			// 最大长度
			maxlength: {
				type: String,
				default: "20"
			},
			// 占位字符串
			placeholder: {
				type: String,
				default: ''
			},
			ishowpwd: {
				type: Boolean,
				default: false
			},
			// inputStr: {
			// 	type: String,
			// 	default: 'ttt'
			// }
			
			defaultValue:{
				type:String,
				default:''
			}
		},

		mounted() {
			if (this.ishowpwd)
				this.password = true
			
			this.inputStr = this.defaultValue
		},

		data() {
			return {
				isInputFocus: false,
				password: false,
				isShowPwd: false,
				inputStr: '',
			}
		},
		methods: {
			onPhoneInputFocus() {
				this.isInputFocus = true;
			},

			onPhoneInputBlur() {
				this.isInputFocus = false;
			},

			onInputChanged(event) {
				var inputPhoneStr = event.target.value;
				this.inputStr = inputPhoneStr
				this.$emit('onInputValueChanged', this.inputStr)
				this.$emit('input', event.target.value)

			},

			onPwdShowChange() {
				this.password = !this.password
			}
		}
	}
</script>

<style scoped>
	.ss-common-input {
		background-color: #00000000;
		border: #00000000;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 44px;
		font-size: 36upx;
	}
	
	
	.ss-common-input:focus{
	    outline: none; 
	    border: 0px solid #fff;
	}

	.ss-common-input-placehold {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.65);
		/* line-height: 36upx; */
	}

	.ss-container {
		display: flex;
		flex-direction: row;
		align-content: center;
		height: 80upx;
	}

	.ss-border-bottom {
		padding: 16upx 16upx 0upx 32upx;
		border-radius: 25px;
		/* border: 1px solid rgba(255, 255, 255, 0.7); */
		
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50px;

		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ss-border-bottom-focus {

		padding: 16upx 16upx 0upx 32upx;
		/* border-radius: 25px; */
		border: 1px solid rgba(255, 255, 255, 1.0);
		
		
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50px;

		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ss-pwd-icon {
		font-size: 128upx;

	}
	

</style>
